<template>
    <div class="right">
        <div class="right-top">
            <div class="cookise active">
                <span>浏览记录</span>
            </div>
        </div>
        <!-- 右下 -->
        <div class="right-lower">
            <div class="rl-top">
                <el-row :gutter="20">
                    <el-col :span="8" :offset="0">
                        <el-input
                            class="w-50 m-2"
                            placeholder=""
                            :prefix-icon="Search"
                            v-model="abc"
                            @keyup.enter="toSearch"
                        />
                    </el-col>
                    <el-col :span="2" :offset="0">
                        <el-button @click="toSearch"> 搜索</el-button>
                    </el-col>
                    <el-col :span="9" :offset="0"></el-col>
                    <el-col :span="5" :offset="0">
                        <div class="delete">
                            <span
                                class="deletes"
                                @click="statedelest = 0"
                                v-if="statedelest"
                                >批量删除</span
                            >
                            <div v-else>
                                <div
                                    class="flex justify-space-between mb-4 flex-wrap gap-4"
                                >
                                    <el-button
                                        type="danger"
                                        link
                                        @click="statedelest = 1"
                                        >取消</el-button
                                    >
                                    <el-button
                                        type="danger"
                                        link
                                        text
                                        @click="deleteItemAll"
                                        >确定{{ itemIds?.length }}</el-button
                                    >
                                    <el-button
                                        type="danger"
                                        link
                                        @click="ischecked"
                                        v-if="state"
                                        >全选</el-button
                                    >
                                    <el-button
                                        type="danger"
                                        link
                                        @click="isNoChecked"
                                        v-else
                                        >取消全选</el-button
                                    >
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <!-- :htItem="htItem" v-for="htItem in historyDataList " :key="htItem.id" -->
            <HistoryVideo
                :htItem="htItem"
                v-for="htItem in historyDataList"
                :key="htItem.id"
                @deleteHistory="deleteHistory"
                :state="state"
                :statedelest="statedelest"
                :getitemId="getitemId"
            ></HistoryVideo>

            <!-- <el-empty :image-size="200" /> -->
        </div>
    </div>
</template>

<script setup lang="ts">
import { Key, Search } from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import HistoryVideo from "../HistoryVideo/index.vue";
import trainingRoomApi, {
    type HistoryItem,
    type HistoryList,
} from "../../../../api/trainingRoom";
import { filter, method } from "lodash";
import { ElMessage, ElMessageBox } from "element-plus";

const abc = ref();

//元数据
const resourceData = ref<HistoryItem[]>();

// 获取历史记录数据
const historyDataList = ref<HistoryItem[]>();
const getHistoryData = async () => {
    try {
        let result = await trainingRoomApi.getHistoryList();
        resourceData.value = result.content;
        historyDataList.value = result.content;
    } catch (error) {
        console.error("获取历史记录失败");
    }
};

// 搜索框搜索
const toSearch = () => {
    if (abc.value) {
        historyDataList.value = resourceData.value?.filter((item) => {
            return item.momentTitle.includes(abc.value);
        });
    }
};
// 收集全部数据的id
const allId = ref<string[]>();
//全选
const ischecked = () => {
    state.value = 0;
    // allId.value=resourceData.value?.map(item=>{
    //   return item.id
    // })
    historyDataList.value?.forEach((item) => {
        item.ischecked = true;
    });
};
//取消全选
const isNoChecked = () => {
    state.value = 1;
    historyDataList.value?.forEach((item) => {
        item.ischecked = false;
    });
};

// 收集单选的每个id
const itemIds = ref<string[]>();
const getitemId = (itemId: string) => {
    itemIds.value?.push(itemId);
};


const deleteItemAll = () => {
    ElMessageBox.confirm("确定全部删除?", "Warning", {
        confirmButtonText: "OK",
        cancelButtonText: "Cancel",
        type: "warning",
    })
        .then(() => {
            console.log(itemIds);
            historyDataList.value=historyDataList.value?.filter(item=>{
              return !item.ischecked
            })

            ElMessage({
                type: "success",
                message: "Delete completed",
            });
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "Delete canceled",
            });
        });
};

// 删除一条历史记录
const deleteHistory = (id: string) => {
    historyDataList.value = historyDataList.value?.filter((item) => {
        return item.id != id;
    });
};

// 控制全选取消全选按钮----取消全选是 0  全选 是 1
const state = ref(1);

// 批量删除,与三个按钮控制  批量删除是 1 三个按钮是 0
const statedelest = ref(1);
onMounted(() => {
    getHistoryData();
});
</script>

<style lang="scss" scoped>
.right {
    width: 83%;
    float: left;
    .right-top {
        padding: 40px;
        background-color: #fff;
        border-radius: 5px;
        .cookise {
            width: 100px;
            position: relative;
            padding: 0 0 10px 0;
            span {
                font-size: 14px;
                line-height: 41px;
            }
        }
        .active {
            position: absolute;
            z-index: 1111;
            top: 94px;
            content: "";
            width: 58px;
            border-bottom: 4px solid #f93684;
        }
    }
    .right-lower {
        height: 730px;
        margin-top: 10px;
        background-color: #fff;
        border-radius: 5px;
        .rl-top {
            padding: 20px;
            .delete {
                padding-top: 8px;
                float: right;

                .deletes {
                    font-size: 14px;
                }
            }
        }
    }
}
</style>
